<template>
    <div ref="container" class="scroller">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
    import PerfectScrollbar from 'perfect-scrollbar';
    import 'perfect-scrollbar/css/perfect-scrollbar.css';
    import {watch,defineProps,ref} from 'vue';
    import {useCurrentInstance} from '@/utils/useCurrentInstance'

    const {proxy:vm} = useCurrentInstance();

    const ps = ref(null) as any;

    const resetScrollbar = () => {
        vm.$refs.container.scrollTop = 0;
    }

    watch(() => props.padding, () => {
        vm.$refs.container.style.padding = props.padding;
        vm.$refs.container.style.width = `calc(100% - ${vm.$refs.container.style.paddingLeft} - ${vm.$refs.container.style.paddingRight} )`;
        vm.$refs.container.style.height = `calc(100% - ${vm.$refs.container.style.paddingBottom} - ${vm.$refs.container.style.paddingTop} )`;
        ps.value = new PerfectScrollbar(vm.$refs.container);
    },{
        immediate:true,
    })

    const props = defineProps({
        options:{
            type:Object,
            default:function () {
                return {} ;
            }
        },
        padding:{
            type:String,
            default:function () {
                return '0 0 0 0';
            }
        }
    })

    vm.$refs.container.style.padding = props.padding;
    vm.$refs.container.style.width = `calc(100% - ${vm.$refs.container.style.paddingLeft} - ${vm.$refs.container.style.paddingRight} )`;
    vm.$refs.container.style.height = `calc(100% - ${vm.$refs.container.style.paddingBottom} - ${vm.$refs.container.style.paddingTop} )`;
    ps.value = new PerfectScrollbar(vm.$refs.container);
</script>

<style lang="scss" scoped>

    .scroller{
        overflow: hidden;
        height: 100%;
        width:100%;
        position: relative;
    }

</style>
